<template>
	<view class="main">
		<view class="list">
			<view class="propertyItem" v-for="(item , index) in List" :key="item.key" @click="handleOpen(item.key)">
				<wd-card>
					<view class="content">
						<!-- <view class="icon"></view> -->
						<view class="message">
							<view class="name">{{item.name}}</view>
						</view>
						<!-- <image src="/static/icon/phone.svg" style="width: 5vw;height: 5vh;"></image> -->
					</view>
				</wd-card>
			</view>
		</view>
		<wd-popup v-model="show" custom-style="border-radius:32rpx;height : 50vh ; width:75vw;" @close="handleClose">
			<view class="model_container">
				<wd-cell-group border>
					<wd-cell :title="item.name" :label="item.postion" v-for="(item , index) in modalList"
						:key="item.uid" clickable @click="handleJump(item)" />
				</wd-cell-group>
			</view>
		</wd-popup>

	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'


	import {
		useAppointStore
	} from '../../../stores/appoint';
	const store = useAppointStore()
	const {
		updateInfo
	} = store

	const List = [{
			name: '篮球场预约',
			icon: '',
			key: 'basketball'
		},
		{
			name: '自习室预约',
			icon: '',
			key: 'zixishi'
		},
		{
			name: '停车场预约',
			icon: '',
			key: 'park'
		}
	]

	const areaList = {
		basketball: [{
				name: '东区一号篮球场',
				postion: '东区入口右手边第一个',
				uid: '1'
			},
			{
				name: '东区一号篮球场',
				postion: '东区入口右手边第一个',
				uid: '2'
			},
			{
				name: '东区一号篮球场',
				postion: '东区入口右手边第一个',
				uid: '3'
			},
			{
				name: '东区一号篮球场',
				postion: '东区入口右手边第一个',
				uid: '4'
			},
			{
				name: '东区一号篮球场',
				postion: '东区入口右手边第一个',
				uid: '5'
			},
			{
				name: '东区一号篮球场',
				postion: '东区入口右手边第一个',
				uid: '6'
			},
			{
				name: '东区一号篮球场',
				postion: '东区入口右手边第一个',
				uid: '7'
			},
			{
				name: '东区一号篮球场',
				postion: '东区入口右手边第一个',
				uid: '8'
			}
		]
	}

	const modalList = ref([])
	const show = ref(false)

	const handleOpen = (key) => {
		modalList.value = areaList[key]
		show.value = true
	}

	const handleClose = () => {
		show.value = false;
	}

	const handleJump = (item) => {
		// console.log('wxcall', uid)
		updateInfo(item)
		uni.navigateTo({
			url: `/pages/servers/Appoint/Appoint`
		});
	}
</script>

<style lang="less">
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 2vw;

		.wd-card {
			margin: 1vh 0 !important;
		}

		.content {
			display: flex;
			justify-content: space-between;

			.message {
				display: grid;
				grid-template-rows: auto;
				grid-template-columns: repeat(2, 1fr);
				width: 90%;

				.name {
					color: black;
				}
			}

		}

		.full-width {
			grid-column: span 2;
			grid-row: 2;
		}

		.model_container {
			width: 90%;
			height: 100%;
		}
	}
</style>